<template>
    <el-card>
        <el-form >
            <el-row :gutter="10">
                <!-- 市-->
                <el-col :span="col" >
                    <el-form-item label="所在市:"  >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.city"
                                no-data-text="请选择省/自治区"
                                @change="selection('1', $event)"
                                placeholder="请选择市"
                        >
                            <el-option
                                    v-for="item in dropdowns.city"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--    县-->
                <el-col :span="col">
                    <el-form-item label="所在县:"  >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.county"
                                no-data-text="请选择市/区"
                                @change="selection('2', $event)"
                                placeholder="请选择县"
                        >
                            <el-option
                                    v-for="item in dropdowns.county"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--  乡-->
                <el-col :span="col">
                    <el-form-item label="所在乡:" >
                        <el-select
                                clearable
                                filterable
                                v-model="forms.town"
                                no-data-text="请选择区/县"
                                @change="selection('3', $event)"
                                placeholder="请选择乡"
                        >
                            <el-option
                                    v-for="item in dropdowns.town"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--村-->
                <el-col :span="col">
                    <el-form-item label="所在村:">
                        <el-select
                                clearable
                                filterable
                                no-data-text="请选择乡"
                                v-model="forms.village"
                                @change="selection('4', $event)"
                                placeholder="请选择村"
                        >
                            <el-option
                                    v-for="item in dropdowns.village"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


            </el-row>
            <el-row>
                <el-button  type="success"  style="margin-left: 20px;" @click="search">搜索</el-button>
                <el-button  type="primary"  style="margin-left: 40px;" @click="reset">重置</el-button>
            </el-row>
        </el-form>
    </el-card>
    <el-card class="myecharts">
        <el-row style="height: 400px;background-color: #ecf5ff;padding: 0px">
            <el-col :span=12 >
                <BarChart :yData="poolData"></BarChart>
            </el-col>
            <el-col :span=12 >
                <BarChart :chartColor="'#95d475'"  :chartTitle="'农户风险类型分布'"
                          :xData="xdata" :yData="riskData"></BarChart>
            </el-col>
        </el-row>
        <el-row style="height: 650px;background-color: #ecf5ff">
            <el-col :span=12 >
                <PieChart :data="piePoolData"></PieChart>
            </el-col>
            <el-col :span=12 >
                <PieChart :chartTitle="'农户风险类型分布'" :data="pieRiskData"></PieChart>
            </el-col>
        </el-row>
    </el-card>

</template>
<script setup>
    import { ref, reactive, onMounted} from 'vue';
    import allData from '../../assets/json/village.json';
    import {defineProps} from "@vue/runtime-core"; //
    import {searchInfo} from "../../api/farmer";
    import {searchByArea} from "../../api/farmer";
    //图一
    //导入图
    import BarChart from './clue/BarChart.vue'
    import PieChart from './clue/PieChart.vue'
    //风险等级横坐标
    const xdata=['医疗','水利','住房','紧急','健康','教育']
    //纵坐标
    //贫困人数
    const poolData=reactive([])
    //风险类型
    const riskData=reactive([])


    //饼图的数据
    const piePoolData=reactive([])

    const pieRiskData=reactive([])

    //表格选择
    // Props定义
    const props = defineProps({
        labelWidth: {
            type: Number,
            default: 80,
        },
        showRemark: {
            type: Boolean,
            default: false,
        },
        col: {
            type: Number,
            default: 6,
        },
        data: {
            type: Object,
            default: {}
        },
    });

    // State定义
    const dropdowns = reactive({
        city: [],
        county: [],
        town: [],
        village: [],
    });
    const forms = reactive({
        city: "",
        county: "",
        town: "",
        village: "",
        poorlevel:"",
        firstid:""

    });

    //后端查询的表单数据
    const searchForm=reactive({
        city: "",
        county: "",
        town: "",
        village: "",
        poorlevel:"",
        risk:""
    })



    onMounted(() => {
        selection("0", "1");
        console.log(forms)

        myPage()
    });


    //根据编号找其下属行政区域
    const findItem = (data, targetCode) => {
        for (const item of data) {
            if (item.value === targetCode) {
                return item.children;
            }
            if (item.children && item.children.length) {
                const found = findItem(item.children, targetCode);
                if (found) return found;
            }
        }
        return null;
    };

    // 根据value查找label
    const findLabelByValue = (data,targetValue ) => {
        for (const item of data) {
            if (item.value === targetValue) {
                return item.label;
            }
            if (item.children&& item.children.length) {
                const foundLabel = findLabelByValue(item.children,targetValue);
                if (foundLabel) {
                    return foundLabel;
                }
            }
        }
        return null;
    };

    // 新政区域选择方法定义
    const selection = (level, code) => {
        console.log("选择变化");
        console.log(level, code);

        let cityData=allData;
        switch (level) {
            /* 渲染所有的市*/
            case "0":
                dropdowns.city = cityData;
                break;
            case "1":
                /*选择市渲染省*/
                let countyData=findItem(cityData,code)
                console.log('县')
                console.log(countyData)
                dropdowns.county = countyData;
                dropdowns.town = [];
                dropdowns.village = [];
                forms.county = "";
                forms.town = "";
                forms.village = "";
                searchForm.county='';
                searchForm.town='';
                searchForm.village='';
                console.log("选择的市是：")
                console.log( forms)
                searchForm.city= findLabelByValue(cityData,forms.city)
                console.log(searchForm)

                break;
            case "2":
                /* 选择县渲染乡*/

                let townData=findItem(cityData,code)
                console.log('乡')
                console.log(townData)
                dropdowns.town = townData;
                dropdowns.village = [];
                forms.town = "";
                forms.village = "";
                searchForm.town='';
                searchForm.village='';
                console.log("选择的县是：")
                console.log(forms)
                searchForm.county= findLabelByValue(cityData,forms.county)
                console.log(searchForm)
                break;
            case "3":
                /* 选择乡渲染村*/
                let villageData=findItem(cityData,code)
                console.log('村')
                console.log(villageData);
                dropdowns.village = villageData;
                forms.village = "";
                searchForm.village='';
                console.log("选择的乡是：")
                console.log(forms)
                searchForm.town= findLabelByValue(cityData,forms.town)
                console.log(searchForm)
                break;
            case "4":
                /*选择村*/
                console.log("选择的村是：")
                console.log(forms)
                searchForm.village= findLabelByValue(cityData,forms.village)
                console.log(searchForm)
                break;


        }
    };


    //提交
    const search=()=>{
        console.log("Submitting:", searchForm);
        myPage()
    }

    //重置
    const reset=()=>{
        forms.city=''
        forms.county=''
        forms.town=''
        forms.village=''
        searchForm.city=''
        searchForm.county=''
        searchForm.town=''
        searchForm.village=''
        myPage()
    }

    //页面初始化
    const myPage = async() => {
        //清空


        poolData.length=0
        piePoolData.length=0
        riskData.length=0
        pieRiskData.length=0
        for(let i=0;i<=3;i++){
            await getPoor(i)
        }
        console.log('输出数组')
        console.log(poolData)


        for(let i=1;i<=6;i++){
            await  getRisk(i)
        }


    }

    const getPoor=async(level)=>{
        searchForm.firstid=''
        searchForm.poorlevel=level+""
        searchByArea(searchForm).then((res) => {
            console.log("后端请求数据特殊贫困人数")
            console.log(res.data)
            console.log("后端请求数据")
            poolData.push(res.data.length)
            if(level==0){
                piePoolData.push({value:res.data.length,name:"不贫困"})
            }
            else if(level==1){
                piePoolData.push({value:res.data.length,name:"一般贫困"})
            }
            else if(level==2){
                piePoolData.push({value:res.data.length,name:"中等贫困"})
            }
            else if(level==3){
                piePoolData.push({value:res.data.length,name:"特殊贫困"})
            }

        });
    }

    const getRisk=async(level)=>{
        console.log("hhhhhhhhhhhhh")
        console.log(level)
        console.log("hhhhhhhhhhhhh")
        searchForm.poorlevel=''
        searchForm.firstid=level+""
        searchInfo(searchForm).then((res) => {
            console.log("后端请求数据特殊贫困人数")
            console.log(res.data)
            console.log("后端请求数据")
            riskData.push(res.data.length)

            if(level==1){
                pieRiskData.push({value:res.data.length,name:"医疗"})
            }
            else if(level==2){
                pieRiskData.push({value:res.data.length,name:"水利"})
            }
            else if(level==3){
                pieRiskData.push({value:res.data.length,name:"住房"})
            }
            else if(level==4){
                pieRiskData.push({value:res.data.length,name:"紧急"})
            }
            else if(level==5){
                pieRiskData.push({value:res.data.length,name:"健康"})
            }
            else if(level==6){
                pieRiskData.push({value:res.data.length,name:"教育"})
            }


        });
    }



</script>

<style lang="less" scoped>
    /deep/.specific {
        .el-form-item__content {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            justify-content: space-between;
            &::after,
            &::before {
                display: none;
            }
        }
    }

    .myecharts{
        background-color: #ecf5ff;
        height:1050px;
        margin-top: 25px;
    }
</style>
